<!-- 带缩略图的自动轮播 -->
<template>
  <div class="swiper-box">
    <div
      class="carousel-wrap"
      @mouseover="carouselOver"
      @mouseout="carouselOut"
    >
      <!-- 图片容器 -->
      <div class="img-content">
        <el-image :src="imgSrc" class="elimg" lazy />
      </div>

      <!-- 缩略图标 -->
      <div v-if="thumb" ref="indicator" class="indicators">
        <ul class="indicator-list">
          <li
            v-for="(item, index) in defaultList"
            :key="item.id"
            class="indicator-item"
            :class="index === current ? 'active' : ''"
            @mouseover="iconOver(index)"
          >
            <img :src="item.src">
            <div class="highlight">
              <i class="arrow" />
            </div>
          </li>
        </ul>
      </div>

      <!-- 上一张、下一张按钮 -->
      <div v-if="arrow" class="controls">
        <div title="上一条" class="prev" @click="toggleImg('prev')">
          <i class="el-icon-arrow-left" />
        </div>
        <div title="下一条" class="next" @click="toggleImg('next')">
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <!-- 上一张、下一张按钮 -->
    </div>
  </div>
</template>

<script>
// const iconWidth = 30
export default {
  props: {
    interval: {
      type: Number,
      default: 3500// 3500默认
    },
    arrow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    thumb: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data () {
    return {
      defaultList: [
        {
          id: 1,
          src:
            'http://img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg',
          title: '新闻标题',
          contents: '新闻内容'
        },
        {
          id: 2,
          src:
            'http://img10.360buyimg.com/da/jfs/t5626/206/5387922315/163107/149fda50/595ef2caN399971af.jpg',
          title:
            '55水电费22 的地sssdddddddddddddddddddddddddddddddddddddddddddddd方'
        },
        {
          id: 3,
          src:
            'http://img10.360buyimg.com/da/jfs/t5626/206/5387922315/163107/149fda50/595ef2caN399971af.jpg',
          title:
            '55水电费22 的地sssdddddddddddddddddddddddddddddddddddddddddddddd方'
        }
      ],
      current: 0, // 默认显示第一张图片，数组下标为0
      startmove: null, // 开启定时器
      contents: []
    }
  },
  computed: {
    imgSrc () {
      return this.defaultList && this.defaultList.length
        ? this.defaultList[this.current].src
        : ''
    }
    /* title () {
      return this.defaultList[this.current].title
    },
    contents () {
      return this.defaultList[this.current].contents
    } */
  },
  watch: {
    defaultList: {
      immediate: true,
      handler (val) {
        if (val && val.length) {
          // this.imgSrc = this.defaultList[this.current].src
          this.startmove = setInterval(this.bannerMove, this.interval)
        }
      }
    }
  },
  created () {
    // 动态计算底部小图标容器的宽度和水平居中
    /* this.$nextTick(() => {
      this.$refs.indicator.style.width = iconWidth * this.defaultList.length + 'px'
      this.$refs.indicator.style.marginLeft = -(iconWidth / 2) * this.defaultList.length + 'px'
    }) */
  },
  beforeDestroy () {
    clearInterval(this.startmove)
  },
  methods: {
    // 图片上、下一张切换
    toggleImg (type) {
      if (type === 'prev') {
        this.current === 0
          ? (this.current = this.defaultList.length - 1)
          : this.current--
      } else {
        this.current === this.defaultList.length - 1
          ? (this.current = 0)
          : this.current++
      }
    },
    // 小图标鼠标hover事件
    iconOver (index) {
      if (isNaN(index)) {
        return
      }
      this.current = index
    },
    // 图片自动切换定时器方法
    bannerMove () {
      this.current === this.defaultList.length - 1
        ? (this.current = 0)
        : this.current++
    },
    // 鼠标移入图片区域，清除定时器，防止和用户切换图片事件冲突
    carouselOver () {
      clearInterval(this.startmove)
    },
    // 鼠标移出图片区域，开启定时器
    carouselOut () {
      this.startmove = setInterval(this.bannerMove, this.interval)
    }
  }
}
</script>
<style scoped lang="scss">
.swiper-box {
  max-width: 1300px;
  margin: 0 auto;
  .img-content {
    height: 300px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .indicators {
    width: 246px;
    display: flex;
    justify-content: center;
    .indicator-item {
      width: 226px;
      height: 106px;
      /* overflow: hidden; */
      opacity: 0.7;
      position: relative;
      margin-bottom: 10px;
      padding: 2px;
      &:last-child{
        margin-bottom: 0;
      }
      img {
        width: 100%;
        height: 100%;
      }

      &.active {
        opacity: 1;
        .highlight {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 3;
          border: 2px solid #fd0;
        }
        .arrow {
          position: absolute;
          top: 50%;
          left: -14px;
          margin-top: -6px;
          display: block;
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-right-color: #fd0;
        }
      }
    }
  }

  .carousel-wrap {
    position: relative;
    /* max-width: 1010px;
    margin: 0 auto; */
    display: flex;
    justify-content: space-between;
    .controls {
      .prev,
      .next {
        position: absolute;
        top: 160px;
        width: 40px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333;
        font-size: 34px;
        cursor: pointer;
        opacity: 0.2;
      }
      .prev {
        left: -104px;
        &:hover {
          opacity: 1;
        }
      }
      .next {
        right: -104px;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
}
</style>
